<template>
  <el-card shadow="never" class="card_box">
    <el-form ref="formRef" :inline="true" :model="formData" label-position="left" label-width="auto">
      <div class="form_item_box">
        <el-form-item label="时间筛选" class="content_left_item">
          <el-radio-group v-model="pageType" @change="changDateBtn">
            <el-radio :label="1" border>昨天</el-radio>
            <el-radio :label="2" border>最近7天</el-radio>
            <el-radio :label="3" border>最近30天</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-date-picker
          @change="onTimeChange"
          v-model="formData.effect_time"
          type="daterange"
          prefix-icon="Calendar"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          range-separator="—"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :disabledDate="disabledDate"
          @calendar-change="handleChange"
          @focus="handleFocus"
        />
        <el-form-item>
          <div class="btn_box">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onClear()">清空</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { getDay } from '@/utils/utils'
  const emit = defineEmits(['secrchsubmit'])
  const formData: any = reactive({
    effect_time: [getDay(-6), getDay(0, true)] //创建时间
  })
  const pickDay = ref()
  const impose = ref(180)
  const disabledDate = (time: number) => {
  if (!pickDay.value) {
    return false
  }
  if (impose.value) {
    const con1 = new Date(pickDay.value).getTime() - impose.value * 24 * 60 * 60 * 1000
    const con2 = new Date(pickDay.value).getTime() + impose.value * 24 * 60 * 60 * 1000
    return time < con1 || time > con2
  }
  return false
}
const handleChange = (val: Date[]) => {
  if (impose.value) {
    const [pointDay] = val
    pickDay.value = pointDay
  }
}
const handleFocus = () => {
  pickDay.value = null
}
  const pageType = ref(2)
  const onSubmit = () => {
    emit('secrchsubmit', formData.effect_time)
  }
  const onTimeChange = (v: any) => {
    !!v || (formData.effect_time = [])
  }
  const changDateBtn = (v: any) => {
    switch (v) {
      case 1:
        formData.effect_time = [getDay(-1), getDay(-1, true)]
        break
      case 2:
        formData.effect_time = [getDay(-6), getDay(0, true)]
        break
      case 3:
        formData.effect_time = [getDay(-29), getDay(0, true)]
        break
    }
    onSubmit()
  }
  const onClear = () => {
    formData.effect_time = [getDay(-6), getDay(0, true)]
    pageType.value = 2
    onSubmit()
  }
</script>

<style lang="scss" scoped>
  .el-radio {
    margin-right: 0;

    :deep(.el-radio__input) {
      display: none;
    }

    &:hover {
      color: #ff6b00;
      border-color: #ff6b00;
    }
  }

  .card_box {
    margin-bottom: 16px;
  }

  .form_item_box {
    display: grid;
    grid-template-columns: 375px 400px 1fr;
    grid-gap: 20px;

    .el-form-item {
      margin-bottom: 0;
    }
  }

  .btn_box {
    text-align: right;
  }
</style>
